<template>
  <div class="mg-lt-16 pd-rt-16 fx-ct-ct">
    <!-- <el-select
      style="width: 190px"
      v-model="searchVal"
      filterable
      placeholder="请输入搜索内容"
      @change="changeSelectHandle"
    >
      <el-option
        v-for="item in filterMenuList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select> -->

    <!-- <img
      v-if="isFullScren"
      class="ic-20 mg-rt-16 mg-lt-16 cs-pt"
      @click="handleScreen"
      src="@/assets/icons/retract.png"
    />
    <img
      class="ic-20 mg-rt-16 mg-lt-16 cs-pt"
      @click="handleScreen"
      src="@/assets/icons/scale.png"
      v-else
    /> -->
    <!-- <TrDropdown
      v-model="lanValue"
      :dataList="$website.languageList"
      @dropBack="changeLanHandle"
    >
      <img class="ic-20 mg-rt-4" src="@/assets/icons/language.png" />
    </TrDropdown> -->
    <!-- <div class="divide-line"></div> -->
    <img class="ic-20" src="@/assets/common/man_df_photo.png" alt="" />
    <div class="cr-wt-10" style="margin: 0 4px 0 8px">
      {{ userInfo.nickname }}
    </div>
    <TrDropdown
      :dataList="operationList"
      :isShowValue="false"
      @dropBack="commandHandle"
      @visibleChange="visibleChange"
    >
      <img
        :class="['ic-20 ts-al', { 'down-icon': dropdownVisible }]"
        src="@/assets/icons/down_1.png"
        alt=""
      />
    </TrDropdown>
  </div>
</template>

<script>
import { fullscreenToggel } from "@/utils/util";
import TrDropdown from "@/components/Tr-dropdown/Tr-dropdown.vue";
import { mapGetters } from "vuex";
export default {
  name: "OperationBox",
  components: {
    TrDropdown,
  },
  computed: {
    ...mapGetters(["language", "userInfo", "allMenu", "isFullScren"]),
  },
  watch: {
    allMenu: {
      handler(newValue) {
        this.filterMenuList = [];
        this.$nextTick(() => {
          this.findMenu(newValue);
        });
      },
      deep: true,
    },
  },
  data: () => ({
    lanValue: "",
    operationList: [
      {
        label: "个人中心",
        value: 1,
      },
      // {
      //   label: "修改密码",
      //   value: 2,
      // },
      {
        label: "退出登录",
        value: 3,
      },
    ],
    searchVal: "",
    filterMenuList: [],
    dropdownVisible: false,
  }),
  methods: {
    visibleChange(val) {
      this.dropdownVisible = val;
    },
    changeSelectHandle(val) {
      let target = this.$findByProperty(this.allMenu, "path", val);
      if (target && target.id)
        this.$store.dispatch("SaveMenuInClick", target.id);
      this.$router.push({
        path: val,
      });
      this.$nextTick(() => {
        this.searchVal = "";
      });
    },
    changeLanHandle(val) {
      this.$store.commit("SET_LANGUAGE", val.value);
      this.$i18n.locale = val.value;
    },
    handleScreen() {
      fullscreenToggel();
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREN");
    },
    commandHandle(val) {
      switch (val.value) {
        case 1:
          this.$router.push("/worktable/userCenter");
          break;
        case 2:
          this.$router.push("/worktable/password");
          break;
        case 3:
          this.$textShow({
            title: this.$t("tip.label"),
            content: [this.$t("login.outTip")],
          })
            .then(() => {
              this.$store.dispatch("FedLogOut").then(() => {
                // this.$message(this.$t("login.logout"));
                this.$message({
                  message: this.$t("login.logout"),
                  type: "info",
                  duration: 1500,
                });
                this.$router.push("/login");
              });
            })
            .catch(() => {});

          break;
      }
    },
    findMenu(list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].children && list[i].children.length > 0) {
          this.findMenu(list[i].children);
        } else {
          this.filterMenuList.push({
            value: list[i].path,
            label: list[i].name,
          });
        }
      }
    },
  },
  mounted() {
    this.lanValue = this.language;
  },
};
</script>

<style lang="scss" scoped>
.down-icon {
  transform: rotate(180deg);
}
</style>
